import 'package:flutter/material.dart';


import 'package:xbaistack/model/option.dart';
import 'package:xbaistack/model/regional.dart';
import 'package:xbaistack/widget/bottom_sheet/data_picker.dart';
import 'package:xbaistack/widget/bottom_sheet/dates.dart';
import 'package:xbaistack/widget/group_setting.dart';


class PickerPage extends StatefulWidget {
  const PickerPage({super.key});

  @override
  State<StatefulWidget> createState() => _PickerPageState();
}

class _PickerPageState extends State<PickerPage> {
  Option<int>? gender; // 性别
  Option<int>? satisfied; // 满意
  List<Option<int>>? options; // 多选
  int? height; // 身高
  Option? degree; // 学历
  Option? constellation; // 星座
  DateTime? yyyy; // 年
  DateTime? yyyyMM; // 年月
  DateTime? yyyyMMdd; // 年月日
  DateTime? hhmm; // 时分
  DateTime? hhmmss; // 时分秒
  DateTime? yyyyMMddHHmmss; // 年月日时分秒
  List<Option<int>>? items; // 联动列表
  List<Regional>? regions; // 省市区

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("小白栈记")),
      body: GroupSetting(children: [
        Item.leading("文字类"),
        Item.text(
          title: "学历",
          description: degree?.label,
          onTap: () {
            DataPicker.list(
              context: context,
              title: "请选择",
              initialValue: degree == null ? null : [degree!.value],
              options: const [
                Option(label: "大专以下", value: 1),
                Option(label: "大专", value: 2),
                Option(label: "本科", value: 3),
                Option(label: "硕士", value: 4),
                Option(label: "博士", value: 5),
              ],
            ).show().then((items) {
              if (items != null) {
                setState(() => degree = items[0]);
              }
            });
          },
        ),
        Item.text(
          title: "星座",
          description: constellation?.label,
          onTap: () {
            DataPicker.list(
              context: context,
              title: "请选择",
              initialValue:
                  constellation == null ? null : [constellation!.value],
              options: const [
                Option(label: "白羊座", value: 1),
                Option(label: "金牛座", value: 2),
                Option(label: "双子座", value: 3),
                Option(label: "巨蟹座", value: 4),
                Option(label: "狮子座", value: 5),
                Option(label: "处女座", value: 6),
                Option(label: "天秤座", value: 7),
                Option(label: "天蝎座", value: 8),
                Option(label: "射手座", value: 9),
                Option(label: "摩羯座", value: 10),
                Option(label: "水瓶座", value: 11),
                Option(label: "双鱼座", value: 12),
              ],
            ).show().then((items) {
              if (items != null) {
                setState(() => constellation = items[0]);
              }
            });
          },
        ),
        Item.text(
          title: "性别",
          description: gender?.label,
          onTap: () {
            DataPicker.list(
              context: context,
              title: "请选择",
              initialValue: gender == null ? null : [gender!.value],
              options: const [
                Option(
                  label: "男生",
                  value: 1,
                  icon: Icon(Icons.male, color: Colors.blueAccent),
                ),
                Option(
                  label: "女生",
                  value: 2,
                  icon: Icon(Icons.female, color: Colors.redAccent),
                ),
                Option(
                  label: "其他",
                  value: 3,
                  icon: Icon(Icons.more_horiz),
                ),
              ],
            ).show().then((items) {
              if (items != null) {
                setState(() => gender = items[0]);
              }
            });
          },
        ),
        Item.leading("数字类"),
        Item.text(
          title: "身高",
          description: height == null ? null : "${height}cm",
          onTap: () {
            DataPicker.number(
              context: context,
              title: "请选择",
              minValue: 140,
              maxValue: 210,
              suffix: "cm",
              initialValue: height,
            ).show().then((value) {
              if (value != null) {
                setState(() {
                  height = value;
                });
              }
            });
          },
        ),
        Item.leading("日期相关"),
        Item.text(
          title: "年",
          description: Dates.format(DateTimeFormatter.YYYY.format, yyyy),
          onTap: () {
            DataPicker.datetime(
              context: context,
              title: "请选择",
              initialValue: yyyy,
              formatter: DateTimeFormatter.YYYY,
            ).show().then((value) {
              if (value != null) {
                setState(() {
                  yyyy = value;
                });
              }
            });
          },
        ),
        Item.text(
          title: "年月",
          description: Dates.format(DateTimeFormatter.YYYY_MM.format, yyyyMM),
          onTap: () {
            DataPicker.datetime(
              context: context,
              title: "请选择",
              initialValue: yyyyMM,
              formatter: DateTimeFormatter.YYYY_MM,
            ).show().then((value) {
              if (value != null) {
                setState(() {
                  yyyyMM = value;
                });
              }
            });
          },
        ),
        Item.text(
          title: "年月日",
          description:
              Dates.format(DateTimeFormatter.YYYY_MM_DD.format, yyyyMMdd),
          onTap: () {
            DataPicker.datetime(
              context: context,
              title: "请选择",
              initialValue: yyyyMMdd,
              formatter: DateTimeFormatter.YYYY_MM_DD,
            ).show().then((value) {
              if (value != null) {
                setState(() {
                  yyyyMMdd = value;
                });
              }
            });
          },
        ),
        Item.text(
          title: "时分",
          description: Dates.format(DateTimeFormatter.HH_MM.format, hhmm),
          onTap: () {
            DataPicker.datetime(
              context: context,
              title: "请选择",
              initialValue: hhmm,
              formatter: DateTimeFormatter.HH_MM,
            ).show().then((value) {
              if (value != null) {
                setState(() {
                  hhmm = value;
                });
              }
            });
          },
        ),
        Item.text(
          title: "时分秒",
          description: Dates.format(DateTimeFormatter.HH_MM_SS.format, hhmmss),
          onTap: () {
            DataPicker.datetime(
              context: context,
              title: "请选择",
              initialValue: hhmmss,
              formatter: DateTimeFormatter.HH_MM_SS,
            ).show().then((value) {
              if (value != null) {
                setState(() {
                  hhmmss = value;
                });
              }
            });
          },
        ),
        Item.text(
          title: "年月日时分秒",
          description: Dates.format(
              DateTimeFormatter.YYYY_MM_DD_HH_MM_SS.format, yyyyMMddHHmmss),
          onTap: () {
            DataPicker.datetime(
              context: context,
              title: "请选择",
              initialValue: yyyyMMddHHmmss,
              formatter: DateTimeFormatter.YYYY_MM_DD_HH_MM_SS,
            ).show().then((value) {
              if (value != null) {
                setState(() {
                  yyyyMMddHHmmss = value;
                });
              }
            });
          },
        ),
        Item.leading("其他选择器"),
        Item.text(
          title: "联动列表",
          description: items?.map((e) => e.label).join("/"),
          onTap: () {
            DataPicker.list(
              context: context,
              title: "请选择",
              initialValue: items?.map((e) => e.value).toList(),
              options: const [
                Option(label: "非常满意", value: 1, children: [
                  Option(label: "AA", value: 6, children: [
                    Option(label: "BB", value: 7, children: [
                      Option(label: "BB", value: 8),
                      Option(label: "CC", value: 9),
                      Option(label: "DD", value: 10),
                    ]),
                    Option(label: "CC", value: 11),
                    Option(label: "DD", value: 12),
                  ]),
                  Option(label: "BB", value: 13),
                  Option(label: "CC", value: 14),
                  Option(label: "DD", value: 15),
                ]),
                Option(label: "满意", value: 2),
                Option(label: "还行", value: 3),
                Option(label: "一般", value: 4),
                Option(label: "不咋地", value: 5),
              ],
            ).show().then((items) {
              if (items != null) {
                setState(() {
                  this.items = items;
                });
              }
            });
          },
        ),
        Item.text(
          title: "省市区",
          description: regions?.map((e) => e.name).join("/"),
          onTap: () {
            DataPicker.regional(
              context: context,
              title: "请选择",
              initialValue: regions?.map((e) => e.code).toList(),
            ).show().then((items) {
              if (items != null) {
                setState(() {
                  regions = items;
                });
              }
            });
          },
        ),
        Item.spacer(),
      ]),
    );
  }
}
